<script setup>
//必写
import * as echarts from 'echarts';
import { onMounted, reactive, ref, watch } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

const data = []
//数据配置项
const chartOptions = {
  color: ["#1c5eb5"],
  tooltip: {
    trigger: "axis"
  },
  // legend: {
  //         // 距离容器10%
  //         right: "0%",
  //         // 修饰图例文字的颜色
  //         textStyle: {
  //             color: "#fff"
  //         }
  //         // 如果series 里面设置了name，此时图例组件的data可以省略
  //         // data: ["邮件营销", "联盟广告"]
  //     },

  // 修饰的是X轴的文字信息
  toolbox: {
    show: true,
    feature: {
      mark: {
        show: true
      },

      magicType: {
        show: false,
        type: ["line", "bar", "stack", "tiled"]
      }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      // data: ["", "202301", "202302", "202303", "202304", "202305", "202306", "202307"],
      axisTick: {
        show: true,
        alignWithLabel: true, // 刻度与标签对齐
        inside: true // 刻度线默认向内绘制
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#fff",
        fontSize: 13,
        show: true, // 是否显示标签
        rotate: 0, // 旋转角度
        interval: 0 // 强制显示所有标签
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false
      },
      splitLine: { // 分隔线相关设置
        show: true,// 是否显示分隔线
        lineStyle: { // 分隔线样式设置
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(19, 37, 72, 0.2)' },
            { offset: 1, color: 'rgba(17, 48, 104, 1)' },
          ], false),
          type: 'solid', // 类型，可选值为'solid'、'dotted'、'dashed'
          width: 1 // 线宽
        }
      }
    }
  ],
  yAxis: [
    {
      interval: 10,
      axisLabel: {
        color: '#ffffff',
        fontSize: 13,
        // formatter: (value, index) => {
        //   const arry = ['0', '10', '15', '30', '50']
        //   return arry[index]
        // },
        // align: 'top'

      },
      // type: "value",
      // max: 50,
      // axisLabel: { // 坐标轴刻度标签相关配置
      //   color: '#ffffff',
      //   fontSize: 13
      // },
      splitLine: { // 分隔线相关设置
        show: false // 是否显示分隔线
      }
    }
  ],
  series: [

    {
      markPoint: { // 标注组件
        data: [
          { type: 'max', name: '最大值' }, // 标注最大值
          { type: 'min', name: '最小值' }, // 标注最小值
          { coord: [2, 15], name: '特殊点', symbolSize: 60, itemStyle: { color: '#fdc9a7' } } // 标注坐标为[2,50]的数据点作为特殊点，并设置它的颜色和大小
        ]
      },
      type: "line",
      stack: "总量",
      lineStyle: { // 折线样式设置
        color: '#106ad6', // 颜色
        width: 3 // 线宽为2
      },
      itemStyle: {
        normal: {
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#106ad6'
              },
              {
                offset: 1,
                color: 'transparent'
              }
            ])
          }
        }
      },
      smooth: true,
      data
    }
  ]

}
//获取dom元素
const countent = ref(null);
let myChart = null
//初始化图表
const chartInit = () => {
  myChart = echarts.init(countent.value);
  // 绘制图表
  myChart.setOption(chartOptions);
}

// 基于准备好的dom，初始化echarts实例
//在onMunted中初始化echarts实例
onMounted(() => {
  chartInit();
})
// 监听数据变化
watch(() => props.data, () => {
  resetCharts() // 数据变化重置图表
})
// 根据数据重置图表
const resetCharts = () => {
  chartOptions.xAxis[0].data = props.data.map(item => item.month.replace('-', ''))
  chartOptions.series[0].data = props.data.map(item => item.qty)
  myChart.setOption(chartOptions)
}
window.addEventListener("resize", () => {
  myChart.resize();
});
</script>

<template>
  <div class="year" ref="countent"></div>
</template>

<style scoped>
.year {
  width: 100%;
  height: 220px;
  margin-left: 10px;
  padding-top: 14px;
  position: relative;
  top: -20px;
  /* background-color: wheat; */
  /* background-image: url('../../assets/title@3x.png') */
}
</style>